<template>
	<div class="contentsByTop">
		<div class="top">
			<div class="left">
				<div class="leftText">
					{{title}}
				</div>
			</div>
			<div class="center">
				{{centerName}}
			</div>
			<div class="right">
				<div class="rightText">
					{{time}}s
				</div>
			</div>
		</div>
		<div class="choseBox" v-if="typeChose>=0">
			<div class="choseBoxItem">
				<!-- 门诊挂号 普通号 -->
				<div v-show="mzlx==0" class="boxItem" v-for="(item,index) in topChoseBoxByMzghByCommon">
					<div :class="item.isChose? 'itemBtn click':'itemBtn '">
						<div class="BtnText">{{item.name}}</div>
					</div>
					<div class="itemPoint" v-if="index<(topChoseBoxByMzghByCommon.length-1)">
						<div class="PointText">......</div>
					</div>
				</div>
				<!-- 门诊挂号 名医号 -->
				<div v-show="mzlx==1" class="boxItem" v-for="(item,index) in topChoseBoxByMzghBySpecial">
					<div :class="item.isChose? 'itemBtn click':'itemBtn '">
						<div class="BtnText">{{item.name}}</div>
					</div>
					<div class="itemPoint" v-if="index<(topChoseBoxByMzghBySpecial.length-1)">
						<div class="PointText">......</div>
					</div>
				</div>
				<!-- 门诊预约 普通号 -->
				<div v-show="mzlx==3" class="boxItem" v-for="(item,index) in topChoseBoxByMzyyByCommon">
					<div :class="item.isChose? 'itemBtn click':'itemBtn '">
						<div class="BtnText">{{item.name}}</div>
					</div>
					<div class="itemPoint" v-if="index<(topChoseBoxByMzyyByCommon.length-1)">
						<div class="PointText">......</div>
					</div>
				</div>
				<!-- 门诊预约 名医号 -->
				<div v-show="mzlx==4" class="boxItem" v-for="(item,index) in topChoseBoxByMzyyBySpecial">
					<div :class="item.isChose? 'itemBtn click':'itemBtn '">
						<div class="BtnText">{{item.name}}</div>
					</div>
					<div class="itemPoint" v-if="index<(topChoseBoxByMzyyBySpecial.length-1)">
						<div class="PointText">......</div>
					</div>
				</div>
				<!-- 医技预约 -->
				<div v-show="mzlx==2" class="boxItem" v-for="(item,index) in topChoseBoxByYjyy">
					<div :class="item.isChose? 'itemBtn click':'itemBtn '">
						<div class="BtnText">{{item.name}}</div>
					</div>
					<div class="itemPoint" v-if="index<(topChoseBoxByYjyy.length-1)">
						<div class="PointText">......</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "mzgh",
		components: {},
		data() {
			return {
				time: 180,
				//门诊挂号 普通号
				topChoseBoxByMzghByCommon: [{
					name: '选择科室',
					isChose: false
				},  {
					name: '选择医生',
					isChose: false
				}, {
					name: '选择时间段',
					isChose: false
				}, {
					name: '确认挂号',
					isChose: false
				}],
				//门诊挂号 名医号
				topChoseBoxByMzghBySpecial: [{
					name: '选择号别',
					isChose: false
				}, {
					name: '选择时间段',
					isChose: false
				}, {
					name: '确认挂号',
					isChose: false
				}],
				//门诊预约 普通号
				topChoseBoxByMzyyByCommon: [{
						name: '选择科室',
						isChose: false
					}, 
					{
						name: '选择医生',
						isChose: false
					}, {
						name: '选择日期',
						isChose: false
					}, {
						name: '选择时间段',
						isChose: false
					}, {
						name: '确认挂号',
						isChose: false
					}
				],
				//门诊预约 名医号
				topChoseBoxByMzyyBySpecial: [{
					name: '选择号别',
					isChose: false
				}, {
					name: '选择日期',
					isChose: false
				}, {
					name: '选择医生',
					isChose: false
				}, {
					name: '选择时间段',
					isChose: false
				}, {
					name: '确认挂号',
					isChose: false
				}],
				//医技预约
				topChoseBoxByYjyy: [{
					name: '选择日期',
					isChose: false
				}, {
					name: '选择时间',
					isChose: false
				}],
				showChose: false,
				timeInter: ''
			};
		},
		props: {
			typeChose: String,
			title: String,
			mzlx: String, //0:门诊挂号 1:门诊预约 2:医技预约
			centerName: String
		},
		methods: {
			ReckonTime() {},
			//重新初始化时间
			reSetTime() {
				this.time = 180;
			}

		},
		computed: {

		},
		mounted() {},
		created() {
			this.timeInter = window.setInterval(() => {
				if (this.time >= 1) {
					this.time -= 1;
				} else {
					clearInterval(this.timeInter);
					// 返回首页
					this.$router.push('/');
				}
			}, 1000);
			if (this.typeChose != "" || parseInt(this.typeChose) >= 0) {
				//门诊挂号选择普通号
				if (this.mzlx == 0) {
					console.log(parseInt(this.typeChose))
					for (let i = 0; i <= parseInt(this.typeChose); i++) {
						this.topChoseBoxByMzghByCommon[i].isChose = true;
					}
					this.showChose = true;
				}
				//门诊挂号选择名医
				if (this.mzlx == 1) {
					console.log(parseInt(this.typeChose))
					for (let i = 0; i <= parseInt(this.typeChose); i++) {
						this.topChoseBoxByMzghBySpecial[i].isChose = true;
					}
					this.showChose = true;
				}
				//医技预约
				if (this.mzlx == 2) {
					console.log(parseInt(this.typeChose))
					for (let i = 0; i <= parseInt(this.typeChose); i++) {
						this.topChoseBoxByYjyy[i].isChose = true;
					}
					this.showChose = true;
				}
				//门诊预约选择普通号
				if (this.mzlx == 3) {
					console.log(parseInt(this.typeChose))
					for (let i = 0; i <= parseInt(this.typeChose); i++) {
						this.topChoseBoxByMzyyByCommon[i].isChose = true;
					}
					this.showChose = true;
				}
				//门诊预约选择名医
				if (this.mzlx == 4) {
					console.log(parseInt(this.typeChose))
					for (let i = 0; i <= parseInt(this.typeChose); i++) {
						this.topChoseBoxByMzyyBySpecial[i].isChose = true;
					}
					this.showChose = true;
				}
			}
		},
		beforeDestroy() {
			if (this.timeInter != null) {
				clearInterval(this.timeInter);
				this.timeInter = null;
			}
		}
	};
</script>
<style scoped>
	@media (min-height: 0px) and (max-height: 1910px) {
		.top {
			display: flex;
			width: 100%;
			height: 8rem;
			align-items: center;
		}
	}

	@media (min-height: 1919px) {
		.top {
			display: flex;
			width: 100%;
		}
	}



	.left {
		width: 33%;
		padding-left: 5rem;
		font-size: 3.242857rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		display: flex;
		padding: 2rem;
		padding-left: 5rem;
	}

	.center {
		width: 33%;
		text-align: center;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.right {
		width: 33%;
		text-align: right;
		font-size: 3.242857rem;
		font-family: Source Han Sans CN;
		padding: 2rem;
		padding-right: 5rem;
		font-weight: 400;
		color: #57A8FF;
	}

	.choseBox {
		display: flex;
		justify-content: center;
		padding-bottom: 20px;
	}

	.choseBoxItem {
		display: flex;
	}

	.boxItem {
		display: flex;
	}

	.itemBtn {
		padding: 1.0625rem 1rem;
		background: #EAF4F9;
		display: flex;
		align-items: center;
		color: #A1ADBB;
	}

	.click {
		background: #E3F6E4;
		color: #46C349;
	}

	.BtnText {
		font-size: 2.525rem;
		width: 100%;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 300;
	}

	.itemPoint {
		height: 100%;
		display: flex;
		margin-left: 5px;
		margin-right: 5px;
		align-items: center;
	}

	.PointText {
		text-align: justify;
		font-size: 1.2625rem;
		text-align: center;
		font-family: Source Han Sans CN;
		display: flex;
		align-items: center;
		height: 100%;
		font-weight: 400;
		color: #ACB9C4;
	}
</style>
